<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Dynamic TabView from JavaScript</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Dynamic TabView from JavaScript</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example shows how to create a <code>TabView</code> widget dynamically and insert it into the page.</p>
</div>

<div class="example yui3-skin-sam">
<div id="demo">
</div>

<script type="text/javascript">
YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({
        children: [{
            label: 'foo',
            content: '<p>foo content</p>'
        }, {
            label: 'bar',
            content: '<p>bar content</p>'
        }, {
            label: 'baz',
            content: '<p>baz content</p>'
        }]
    });

    tabview.render('#demo');
    tabview.selectChild(2);
});
</script>

</div>

<h2>Creating a TabView From JavaScript</h2>

<p>A <code>TabView</code> can be created dynamically using a small amount of JavaScript.</p>

<h3>The Markup</h3>

<p>There are no markup requirements in this case, although you may want to have a placeholder to render the tabview into, which is what this example does.</p>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
&lt;&#x2F;div&gt;</pre>


<h3>The JavaScript</h3>

<p>The minimal requirement for creating a <code>TabView</code> from scratch are the labels and content for each tab.
These are added as the <code>children</code> attribute when creating the <code>TabView</code>.</p>

<pre class="code prettyprint">var tabview = new Y.TabView({
    children: [{
        label: &#x27;foo&#x27;,
        content: &#x27;&lt;p&gt;foo content&lt;&#x2F;p&gt;&#x27;
    }, {
        label: &#x27;bar&#x27;,
        content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
    }, {
        label: &#x27;baz&#x27;,
        content: &#x27;&lt;p&gt;baz content&lt;&#x2F;p&gt;&#x27;
    }]
});</pre>


<h3>Rendering</h3>

<p>Calling render creates the <code>TabView</code>, inserting into the node
passed to render.
</p>

<pre class="code prettyprint">tabview.render(&#x27;#demo&#x27;);</pre>


<h3>Changing the Selected Tab</h3>

<p>By default, clicking a tab makes it selected and shows its content.  You can also do this programmatically
by calling the <code>selectChild</code> method on the <code>TabView</code>, passing it the index of the
tab to be selected.
</p>

<pre class="code prettyprint">tabview.selectChild(2);</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&#x27;tabview&#x27;, function(Y) {
    var tabview = new Y.TabView({
        children: [{
            label: &#x27;foo&#x27;,
            content: &#x27;&lt;p&gt;foo content&lt;&#x2F;p&gt;&#x27;
        }, {
            label: &#x27;bar&#x27;,
            content: &#x27;&lt;p&gt;bar content&lt;&#x2F;p&gt;&#x27;
        }, {
            label: &#x27;baz&#x27;,
            content: &#x27;&lt;p&gt;baz content&lt;&#x2F;p&gt;&#x27;
        }]
    });

    tabview.render(&#x27;#demo&#x27;);
    tabview.selectChild(2);
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="This example shows how to create a TabView wigdet from existing HTML.">
                                        <a href="tabview-basic.html">TabView from Existing Markup</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to create a TabView wigdet from JavaScript.">
                                        <a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to add and remove Tabs.">
                                        <a href="tabview-add-remove.html">Adding and Removing Tabs</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to load tab content remotely using a YQL plugin.">
                                        <a href="tabview-yql.html">Loading Tab Content</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
                                        <a href="../history/history-tabview.html">History + TabView</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
